<template>
  <div class="recommend">
    <scroller
              :on-refresh="refresh"
              :on-infinite="infinite">
      <m-Header :a="1">
      </m-Header>
      <div class="navplugin">
        <!--内容中部-->
        <div class="sec-content">
          <article v-for="(item,i) in a" :key="i" class="newsCard">
            <!--如果是需要置顶的就是上面这个a标签-->
            <a :href="item.link" v-if="item.imgsrc3gtype==2" class="topArt">
              <h3 class="title">{{item.title}}</h3>
              <div class="news-pic">
                <img :src="option.url+'?imageView&thumbnail=234y146&quality=45&interlace=1&enlarge=1&type=webp'" alt="" v-for="(option,ar) in item.picInfo" :key="ar">
              </div>
              <div class="detail">
                <span class="news-tag" >{{item.tag}}</span>
                <span class="news-source">{{item.source}}</span>
                <span class="pubtime">4小时前</span>
                <span class="reply">{{item.tcount}}跟帖</span>
              </div>

            </a>
            <!--否则就是下面这个a标签-->
            <a :href="item.link" v-else class="bomArt">
              <div class="news-info">
                <h3 class="title">{{item.title}}</h3>
                <div class="detail">
                  <span class="news-tag" >{{item.tag}}</span>
                  <span class="news-source">{{item.source}}</span>
                  <span class="pubtime">4小时前</span>
                  <span class="reply">{{item.tcount}}跟帖</span>
                </div>
              </div>
              <div class="news-pic">
                <img :src="option.url+'?imageView&thumbnail=234y146&quality=45&interlace=1&enlarge=1&type=webp'" alt="" v-for="(option,ar) in item.picInfo" :key="ar">
              </div>
            </a>
          </article>
        </div>
      </div>
    </scroller>



  </div>
</template>
<script>
  export default {
    data() {
      return {
        num: 0,//传给子组件的接口信息
        items: [],
        a:[],
        onOff:true
      }
    },
    mounted() {
      for (let i = 1; i <= 20; i++) {
        this.items.push(i + ' - keep walking, be 2 with you.')
      }
      this.top = 1
      this.bottom = 20
    },
    methods: {
      getJsp(){
        this.$jsonp(`https://3g.163.com/touch/nc/api/user/recommend/GuessLike/1-${this.num}-10-0.do`).then(popData=>{
          if(popData){
            this.a=this.a.concat(popData.list)
            //console.log(this.a)
          }
        })
      },
      refresh(done) {//下拉刷新
        setTimeout(() => {
          let start = this.top - 1
          for (let i = start; i > start - 10; i--) {
            this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
          }
          this.top = this.top - 10;
          done()
        }, 1500)
      },
      infinite(done) {//上拉加载
        if (this.bottom >= 30) {
          this.num+=10
          this.getJsp()
          setTimeout(() => {
            done(true)
          }, 1500)
          return;
        }
        setTimeout(() => {
          let start = this.bottom + 1
          for (let i = start; i < start + 10; i++) {
            this.items.push(i + ' - keep walking, be 2 with you.')
          }
          this.bottom = this.bottom + 10;
          setTimeout(() => {
            done()
          })
        }, 1500)
      }
    },
    created() {
      this.getJsp()
    },
  }
</script>
<style scoped>

</style>
